<template>
  <div id="demo">
    <ci-simplemde v-bind:config="{
      spellChecker: false
    }" v-model="content">
    </ci-simplemde>

    <a href="javascript:;" @click="preview">Preview</a>

    <div class="markdown-content">{{content}}</div>

    <div class="html-content" v-html="htmlContent"></div>
  </div>
</template>

<script>
import MarkdonwIt from 'markdown-it'
const md = new MarkdonwIt({
  html: false
})

export default {
  name: 'demo',

  data () {
    return {
      content: '# Happy to use `CISimpleMDE`\n'
    }
  },

  computed: {
    htmlContent() {
      console.log('content', this.content)
      let html = md.render(this.content)
      console.log('html', html)
      return html
    }
  },

  methods: {
    preview() {
      getProduct(4026)
    }
  }
}


function getProduct(id) {
  $.ajax({
    url: 'http://test2016.jiheapp.com/v1/product/pro_details',
    data: {
      product_id: id
    },
    success(res) {
      if (res.status == 200) {
        let data = res.data
        let product = {
          id: data.product_id,
          name: data.name,
          thumb: data.product_image[0].image,
          price: data.price
        }
        console.log('getProduct', id, product)
      }
    }
  })
}

function renderProduct(data) {
  let template = '<div class="product">\
      <div class="ci-image thumb">\
        <img src="{{image}}" />\
      </div>\
      <div class="info">\
        <strong class="name">{{name}}</strong>\
        <span class="price">&yen; {{price}}</span>\
      </div>\
    </div>'

  let html = template
  html = html.replace('{{id}}/g', data.id)
  html = html.replace('{{name}}/g', data.name)
  html = html.replace('{{image}}/g', data.image)
  html = html.replace('{{price}}/g', data.price)
}
</script>